<extend name="Base/common"/>
<block name="style">

   <style type="text/css">
    body{
        background:#EBEBEB;
    }
   .top{
        width: 100%;
        height: 15%;
        

   }

 
    p{
        width: 90%;
        height: 60px;
        margin-left: 5%;
        margin-top:10px; 
        text-align: center;
        height: 60px;
        font-size: 18px;
        letter-spacing:2px;

    }

    .center{ 
        width: 90%;
        height:50%;
        margin-left: 5%;
    }

    .money{
        width: 95%;
        height: 40px;
        background: #fff;
        float: left;
        border:none;
        margin-top: 4%;
        font-size: 24px;
        color:#3e3a39;
    }
    span{
        display: block;
        width: 90%;
        margin: auto;
    }

    label{
        float: left;
        width: 95%;
        height: 20px;
        font-size: 15px;
        padding: 15px 0px;
    }
    .clear{
        clear: both;
    }

    .pay_type {
        margin-top:5%;
        height:130px;
    }
    .pay_type input{
        float: left;
        height: 20px;
    }
    .pcreate li {
        float: left;
        width: 25%;
    }

    .pay_type li {
        background:#fff; 
        width: 100%;
        border-radius: 5px 5px;
        border:1px solid #EBEBEA;
        text-indent: 1em;
        height: 30px;
        line-height: 30px;
    }
    .pay_type .check {
        background:#fff; 
        width: 100%;
        border-radius: 5px 5px;
        border:1px solid #EBEBEA;
        text-indent: 1em;
        height: 30px;
        line-height: 30px;

    }
    .tips{
        position:fixed;
        top:0px;
        left:0px;
        background: rgba(41,81,196,0.5);
        width:100%;
        color:#fff;
        font-size:16px;
        text-align: left;
        text-indent: 2em;
        line-height:30px;
        z-index: 99;
    }




</style>
</block>
<block name="body">
    <div class="tips"></div>
    <div style="position:relative;">
  
            <form action="" method="post" style="height:40%;margin-top:8%">
                <input type="hidden" id="uid" name="shop_name" value="{$one.shop_name}"/>
                
                <div class="center" style="background:#fff;border-radius:5px 5px;padding: 0px 15px;">

                    <i style="float:left;width:100%;height:50%;border-bottom:1px solid #dcdddd;">
                        <b style="float:left;width:5%;height:100%;font-family:Arial;font-size:24px;padding-bottom:0;margin-top:5%">&yen;</b>
                        <input class="money" type="text" name="money" readonly="readonly"  id="money" />
                        
                    </i>
                    <input type="hidden" id="uid" name="uid" value="{$one.uid}"/>                    
                </div>
   
            </form>


    </div>


     <div class="block" style="height:100%;width:100%;position:fixed;top:0;left:0;z-index:9;display:none;background:rgba(0,0,0,0.3);">
        
            <div class="box" style="margin:auto;margin-top:25%;;width:75%;height:auto;background:#fff;box-shadow: 2px 2px 2px #666;border-radius:7px 7px 0px 0px">
            

                <div class="cancle" style="height:50px;border-bottom:#ccc 1px solid;line-height:50px;background:#fff;border-top-left-radius:7px;border-top-right-radius:7px;color:red;text-align:center">
                    温馨提示
                </div>

               
                <div class="pay" style="height:auto;border-bottom:1px solid #ccc;padding:5px 15px;font-size:16px;">
                    如遇到要求扫二维码/兼职刷单/财务要求/银行卡支付宝认证/客服赔款退款等之类的骗局请立即<b style="color:red;">终止交易</b>，如选择<b style="color:red">继续交易</b>视您已阅读以上内容，产生一切后果由您本人自行承担
                </div>
                <label class="sure" style="height:50px;width:100%;border-radius:0px 0px 7px 7px;padding:0px;">
                    <span class="type1"  style="float:left;height:50px;width:50%;color:red;line-height:50px;font-size:18px;background:#fff;text-align:center;border-radius:0px 0px 0px 7px;border-right:1px solid #ccc">立即终止</span>
                    <span class="type2"  style="float:right;height:50px;width:50%;color:#009fe8;line-height:50px;font-size:18px;background:#fff;text-align:center;border-radius:0px 0px 7px 0px">3s</span>
                    
                </label>
        </div>


    </div>
<button type="button" id='login-btn' style="width:22%;height:181px;background:#F9626A;color:#fff;border-radius:0 0;border:1px solid #eee;font-size:18px;position: absolute;right: 0;bottom: 0;z-index:2">付款</button>
</block>
<block name="script">



    <script type="text/javascript">
        ;(function(exports){
          var KeyBoard = function(input, options){
            var body = document.getElementsByTagName('body')[0];
            var DIV_ID = options && options.divId || '__w_l_h_v_c_z_e_r_o_divid';
             
            if(document.getElementById(DIV_ID)){
              body.removeChild(document.getElementById(DIV_ID));
            }
             
            this.input = input;
            this.el = document.createElement('div');
             
            var self = this;
            var zIndex = options && options.zIndex || 1;
            var width = options && options.width || '100%';
            var height = options && options.height || '213px';
            var fontSize = options && options.fontSize || '15px';
            var backgroundColor = options && options.backgroundColor || '#fff';
            var TABLE_ID = options && options.table_id || 'table_0909099';
            var mobile = typeof orientation !== 'undefined';
             
            this.el.id = DIV_ID;
            this.el.style.position = 'absolute';
            this.el.style.left = 0;
            this.el.style.right = 0;
            this.el.style.bottom = 0;
            this.el.style.zIndex = zIndex;
            this.el.style.width = width;
            this.el.style.height = height;
            this.el.style.backgroundColor = backgroundColor;
             
            //样式
            var cssStr = '<style type="text/css">';
            cssStr += '#' + TABLE_ID + '{text-align:center;width:100%;height:180px;border-top:1px solid #eee;background-color:#FFF;}';
            cssStr += '#' + TABLE_ID + ' td{width:26%;border:1px solid #eee;border-right:0;border-top:0;}';
            if(mobile){
              cssStr += '#' + TABLE_ID + ' td:active{background-color:#1FB9FF;color:#FFF;}';
            }
            cssStr += '</style>';

             
            //Button
            var btnStr = '<span style="color:#009fe8;height:33px;width:100%;line-height:33px;border-bottom:none;text-align:center">连付·资金安全保驾护航</span> ';
            // btnStr += '<div id="ok" style="width:65px;height:33px;margin-top:-33px;float:right;text-align:center;color:#1FB9FF;line-height:33px;border-radius:3px;cursor:pointer;">完成</div>';
            // btnStr += '';
             
            //table
            var tableStr = '<table id="' + TABLE_ID + '" border="0" cellspacing="0" cellpadding="0">';
              tableStr += '<tr><td>1</td><td>2</td><td>3</td><td rowspan="4" ></td></tr>';
              tableStr += '<tr><td>4</td><td>5</td><td>6</td></tr>';
              tableStr += '<tr><td>7</td><td>8</td><td>9</td></tr>';
              tableStr += '<tr><td >.</td><td>0</td>';
              tableStr += '<td >删除</td></tr>';
              tableStr += '</table>';
            this.el.innerHTML = cssStr + btnStr + tableStr;
             
            function addEvent(e){
              var ev = e || window.event;
              var clickEl = ev.element || ev.target;
              var value = clickEl.textContent || clickEl.innerText;
              if(clickEl.tagName.toLocaleLowerCase() === 'td' && value !== "删除"){
                    if(value==='.'){
                        if(self.input.value.indexOf('.')>-1){
                                //已经有一个.
                        }else{
                            if(self.input.value.length==0){  
                                self.input.value = '0.';//长度为0时输入.
                            }else{
                                if(self.input.value.indexOf('.')>-1&&self.input.value.indexOf('.')==(self.input.value.length-3)){

                                }else{
                                    self.input.value += value;
                                }
                            }
                            
                        }
                    }else{
                         if(self.input.value.length==0&&value==='0'){  
                                self.input.value = '0.';//长度为0时输入.
                            }else{
                                if(self.input.value.indexOf('.')>-1&&self.input.value.indexOf('.')==(self.input.value.length-3)){

                                }else{
                                    self.input.value += value;
                                }
                            }
                      
                    }
              }else if(clickEl.tagName.toLocaleLowerCase() === 'div' && value === "完成"){
                        

              }else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "删除"){
                var num = self.input.value;
                if(num){
                  var newNum = num.substr(0, num.length - 1);
                  self.input.value = newNum;
                }
              }
            }
             
            if(mobile){
              this.el.ontouchstart = addEvent;
            }else{
              this.el.onclick = addEvent;
            }
            body.appendChild(this.el);
          }
           
          exports.KeyBoard = KeyBoard;
         
        })(window);

    </script>


<script >

  
    var time=2;
    var i;
    $('#login-btn').click(function(){

        // alert(9)
        var money=$('#money').val();
        // alert(type)
        if(money==0||money==''){
            $('.tips').text('请输入金额')
            $('.tips').show()
            setTimeout(function(){
                $('.tips').hide()                              
            },2000)

        }else{
                if(0.01>money){
                    // 100-50000 信用卡
                    $('.tips').text('当前选择付款方式金额不可低于0.01元')
                    $('.tips').show()
                    setTimeout(function(){
                        $('.tips').hide()                              
                    },2000)

                }else if(money>50000){
                    $('.tips').text('当前选择付款方式金额不可超过50000元')
                    $('.tips').show()
                    setTimeout(function(){
                        $('.tips').hide()                              
                    },2000)

                }else{
                    $('.block').show()
                    $('#__w_l_h_v_c_z_e_r_o_divid').hide()
                    $('#login-btn').hide()
                    i=setInterval(function(){
                        if(time>0){
                            $('.type2').html(time+'s')
                            time--;
                        }else{
                            clearInterval(i)
                            // 信用卡
                            $('.type2').html('<button  style="background:#fff;color:#009fe8;width:100%;height:100%;border:none">继续交易</button>')
                            
                        }
                        
                    },1000)


                }
       



            
        }
    })

    $('.type1').click(function(){
        $('.block').hide()
        $('#__w_l_h_v_c_z_e_r_o_divid').show()
        $('#login-btn').show()
        time=2
        clearInterval(i)
        $('.type2').html('3s')
    })

    $('.type2').on('click','button',function(){
        $('form').submit()



    })


    </script>




    <script type="text/javascript">
      var input1 = document.getElementById('money');  
        new KeyBoard(input1);

    </script>

</block>